<template>
  <div class="projectAnalysis">
    <div class="searchBar">
      <el-date-picker
        v-model="searchParams.dates"
        type="datetimerange"
        :clearable="false"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right">
      </el-date-picker>
      <el-button style="margin-left: 14px;" type="primary" @click="handleSearch">查询</el-button>
    </div>
    <el-table
      style="width: 100%"
      :data="tableData"
      height="100%"
      stripe>
      <el-table-column
        prop="shopName"
        label="店铺名称">
      </el-table-column>
      <el-table-column
        width="240"
        prop="description"
        label="店铺类目">
      </el-table-column>
      <el-table-column
        width="100"
        prop="merchantActualReceived"
        label="店铺交易额">
      </el-table-column>
      <el-table-column
        prop="sitePromotionFeeRatio"
        label="推广费">
      </el-table-column>
      <el-table-column
        prop="targetROI"
        label="投产比">
      </el-table-column>
      <el-table-column
        width="130"
        prop="freightCompensation"
        label="运费险（平均值）">
      </el-table-column>
      <el-table-column
        width="100"
        prop="newDay"
        label="今日退款率">
      </el-table-column>
      <el-table-column
        width="130"
        prop="zhouQiTuiDay"
        label="周期仅退款率">
      </el-table-column>
      <el-table-column
        width="130"
        prop="zhouQiTuiDay"
        label="周期退货率">
      </el-table-column>
      <el-table-column label="周期售后率" width="130">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleOpenChart(scope.row, '周期售后率')">
            <span>{{ stringToPercentage(scope.row.refundRateOnly) }}</span>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        width="180"
        prop="refundRateOnly"
        label="实时总盈利金额（仅参考）">
      </el-table-column>
      <el-table-column
        width="130"
        prop="refundRateOnly"
        label="已发货盈利金额" >
      </el-table-column>
      <el-table-column
        width="240"
        prop="actualProfitDaiQianShou"
        label="已发货盈利金额（含预估退款金额）">
      </el-table-column>
      <el-table-column
        width="130"
        prop="actualProfitYiQianShou"
        label="已签收盈利金额">
      </el-table-column>
      <el-table-column
        prop="maoLiLv"
        label="毛利率">
      </el-table-column>
      <el-table-column
        prop="shopName"
        label="净利率">
      </el-table-column>
      <el-table-column
        width="130"
        prop="PingTaiFuWuFei"
        label="平台服务费">
      </el-table-column>
      <el-table-column
        prop="FaKuan"
        label="罚款">
      </el-table-column>
      <el-table-column
        width="130"
        prop="refundRateOnly"
        label="店铺月流水">
      </el-table-column>
      <el-table-column
        width="130"
        prop="LiuShui"
        label="店铺总流水">
      </el-table-column>
      <el-table-column
        width="130"
        prop="merchantActualReceivedTuiKuan"
        label="退款金额">
      </el-table-column>
      <el-table-column
        prop="refundRateOnly"
        label="总提现">
      </el-table-column>
    </el-table>
    <div class="pageContain">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParams.pageNum"
        :page-size="searchParams.pageSize"
        :page-sizes="[100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      @opened="handleOpenedDialog"
      width="50%">
      <div
        style="width: 100%; height: 300px;"
        id="chartInstance">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import * as echarts from "echarts";
import { stringToPercentage } from '@/utils/dataTreate';
import { getAllStoreManagement } from '@/api/order'
import moment from 'moment';
export default {
  data() {
    const startTime = moment().subtract(1, 'days').format("yyyy-MM-DD 00:00:00");
    const endTime = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
    return {
      stringToPercentage,
      tableData: [],
      total: 0,
      searchParams: {
        dates: [startTime, endTime],
        pageSize: 100,
        pageNum: 1,
      },

      dialogTitle: "",
      dialogVisible: false,
      chartInstance: null,
      chartData: [],

      pickerOptions: {
        shortcuts: [{
          text: '最近一天',
          onClick(picker) {
            const start = moment().subtract(1, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const start = moment().subtract(7, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        },  {
          text: '最近半个月',
          onClick(picker) {
            const start = moment().subtract(15, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const start = moment().subtract(30, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        }, {
          text: '最近二个月',
          onClick(picker) {
            const start = moment().subtract(60, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const start = moment().subtract(90, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        }]
      },
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      const params = {
        startTime: this.searchParams.dates[0],
        endTime: this.searchParams.dates[1],
      }
      getAllStoreManagement(params).then(res => {
        const { total, rows } = res;
        this.tableData = rows;
        this.total = total;
      })
    },
    handleSearch() {
      this.initData();
    },
    handleSizeChange(v) {
      this.searchParams.pageNum = 1;
      this.searchParams.pageSize = v;
      this.initData();
    },
    handleCurrentChange(v) {
      this.searchParams.pageNum = v;
      this.initData();
    },
    handleOpenChart(data, title) {
      const { productId } = data;
      const keyWords = {
        "仅退款率": "refundRateOnly",
        "退货率": "returnRate",
        "售后率": "afterSalesRate",
        "近7天投产比": "productionRatioInThePast7Days",
        "净利率": "netProfitMargin",
        "平均运费": "averageShippingCost",
      }

      this.dialogVisible = true;
      this.dialogTitle = `【商品ID${productId}】【${title}】趋势图`;
      this.chartData = data[keyWords[title] + 'ChartList'];

    },
    handleOpenedDialog() {
      this.$nextTick(() => {
        this.initChartInstance()
      })
    },
    initChartInstance() {
      if(this.chartInstance) this.chartInstance.dispose();
      this.chartInstance = echarts.init(document.getElementById('chartInstance'));

      const xAxisData = this.chartData.map(item => item.date);
      const seriesData = this.chartData.map(item => item.value);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
        },
        grid: {
          left: 40,
          right: 40,
          bottom: 10,
          top: 40,
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLabel: {
            formatter: function (value, index) {
              return moment(value).format("MM-DD");
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: seriesData,
            type: 'line'
          }
        ]
      }
      this.chartInstance.setOption(option);
    }
  }
}
</script>
<style lang="scss" scoped>
div.projectAnalysis {
  div.searchBar {
    margin-bottom: 20px;
  }
}
</style>
